<!--订单详情-->
<template>
  <div class="order-item">
    <div class="order-header">
      <mt-header title="全部订单">
        <router-link to="/my" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>
    <div class="order-nav">
      <ul>
        <router-link  active-class="active" tag='li' to="/order/all">全部</router-link>
        <router-link  active-class="active" tag='li' to="/order/waitPay">待付款</router-link>
        <router-link  active-class="active" tag='li' to="/order/waitSend">生产中</router-link>
        <router-link  active-class="active" tag='li' to="/order/waitConfirm">待收货</router-link>
        <router-link  active-class="active" tag='li' to="/order/completed">已完成</router-link>
      </ul>
    </div>
    <div class="order-content">
      <!--待付款-->
      <div v-if='$route.params.id == "waitPay"'>
       <div class='info'>
         <div class="info-title">
           <div class="title-l"><img src="../images/stylist/title.jpg" alt=""><span>大花小花小计 ></span></div>
           <div class="title-r"><span>待付款</span></div>
         </div>
         <div class="info-item">
            <div class="item-img">
              <img src="../images/1.png" alt="">
            </div>
            <div class="item-message">
              <div>
                <p>大花小花17秋冬新款 V纹编织初剪腰带双排扣毛呢大V纹编织初剪腰带双排扣毛呢大</p>
              </div>
              <div class="size-color"><span>灰色</span>+<span>XL</span></div>
              <div ><strong>298.00</strong><span class="number">10</span></div>
            </div>
         </div>
         <div class="info-footing">
           <div class="footing-l">
             <p>共<span>400</span>件商品,小计:<strong>2560</strong></p>
           </div>
           <div class="footing-r">
             <span class='cancel'>取消订单</span>
             <span class='play gradient'>立即付款</span>
           </div>
         </div>
       </div>
      </div>
      <!--生产中-->
      <div v-if='$route.params.id == "waitSend"'>
        <div class='info'>
          <div class="info-title">
            <div class="title-l"><img src="../images/stylist/title.jpg" alt=""><span>大花小花小计 ></span></div>
            <div class="title-r"><span>生产中</span></div>
          </div>
          <div class="info-item">
            <div class="item-img">
              <img src="../images/1.png" alt="">
            </div>
            <div class="item-message">
              <div>
                <p>大花小花17秋冬新款 V纹编织初剪腰带双排扣毛呢大V纹编织初剪腰带双排扣毛呢大</p>
              </div>
              <div class="size-color"><span>灰色</span>+<span>XL</span></div>
              <div ><strong>298.00</strong><span class="number">10</span></div>
            </div>
          </div>
          <div class="info-footing">
            <div class="footing-l">
              <p>共<span>400</span>件商品,小计:<strong>2560</strong></p>
            </div>
          </div>
        </div>
      </div>
      <!--待收货-->
      <div v-if='$route.params.id == "waitConfirm"'>
        <div class='info'>
          <div class="info-title">
            <div class="title-l"><img src="../images/stylist/title.jpg" alt=""><span>大花小花小计 ></span></div>
            <div class="title-r"><span>待收货</span></div>
          </div>
          <div class="info-item">
            <div class="item-img">
              <img src="../images/1.png" alt="">
            </div>
            <div class="item-message">
              <div>
                <p>大花小花17秋冬新款 V纹编织初剪腰带双排扣毛呢大V纹编织初剪腰带双排扣毛呢大</p>
              </div>
              <div class="size-color"><span>灰色</span>+<span>XL</span></div>
              <div ><strong>298.00</strong><span class="number">10</span></div>
            </div>
          </div>
          <div class="info-footing">
            <div class="footing-l">
              <p>共<span>400</span>件商品,小计:<strong>2560</strong></p>
            </div>
            <div class="footing-r">
              <span class='cancel'>查看物流</span>
              <span class='play gradient'>确认收货</span>
            </div>
          </div>
        </div>
      </div>
      <!--已完成-->
      <div v-if='$route.params.id == "completed"'>
        <div class='info'>
          <div class="info-title">
            <div class="title-l"><img src="../images/stylist/title.jpg" alt=""><span>大花小花小计 ></span></div>
            <div class="title-r"><span>已完成</span></div>
          </div>
          <div class="info-item">
            <div class="item-img">
              <img src="../images/1.png" alt="">
            </div>
            <div class="item-message">
              <div>
                <p>大花小花17秋冬新款 V纹编织初剪腰带双排扣毛呢大V纹编织初剪腰带双排扣毛呢大</p>
              </div>
              <div class="size-color"><span>灰色</span>+<span>XL</span></div>
              <div ><strong>298.00</strong><span class="number">10</span></div>
            </div>
          </div>
          <div class="info-footing">
            <div class="footing-l">
              <p>共<span>400</span>件商品,小计:<strong>2560</strong></p>
            </div>
            <div class="footing-r">
              <span class='cancel'>查看物流</span>
            </div>
          </div>
        </div>
      </div>
      <!--全部订单-->
      <div v-if='$route.params.id == "all"'>
        <div class='info'>
          <div class="info-title">
            <div class="title-l"><img src="../images/stylist/title.jpg" alt=""><span>大花小花小计 ></span></div>
            <div class="title-r"><span>待付款</span></div>
          </div>
          <div class="info-item">
            <div class="item-img">
              <img src="../images/1.png" alt="">
            </div>
            <div class="item-message">
              <div>
                <p>大花小花17秋冬新款 V纹编织初剪腰带双排扣毛呢大V纹编织初剪腰带双排扣毛呢大</p>
              </div>
              <div class="size-color"><span>灰色</span>+<span>XL</span></div>
              <div ><strong>298.00</strong><span class="number">10</span></div>
            </div>
          </div>
          <div class="info-footing">
            <div class="footing-l">
              <p>共<span>400</span>件商品,小计:<strong>2560</strong></p>
            </div>
            <div class="footing-r">
              <span class='cancel'>取消订单</span>
              <span class='play gradient'>立即付款</span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script typy="text/ecmascript-6">

</script>
<style  lang="less" rel="stylesheet/less">
  @import "../../lib/less/variable";
  .order-item{
    width: 100%;
    .order-header{
      width: 100%;
      header{
        background-color: #fff;
        color:#666;
      }
    }
    .order-nav{
      width: 100%;
      .h(40);
      .lh(38);
      .mt(3);
      .mb(8);
      ul{
        width: 100%;
        background: #fff;
        display: flex;
        li{
          text-align: center;
          flex: 1;
          .fs(14);
        }
        li.active{
          border-bottom:2px solid #0F7AE0;
          font-weight:bold;
          color: #0F7AE0;
        }
      }
    }
    .order-content{
    width: 100%;
      .info{
        background: #fff;
        .info-title{
          width: 100%;
          .h(60);
          .padding(0,10);
          box-sizing: border-box;
          .title-l{
            width: 60%;
            .lh(58);
            display: inline-block;
            img{
              .w(40);
              .h(40);
              vertical-align: middle;
              border-radius: 50%;
            }
            span{
              .fs(16);
              .pl(8);
            }
          }
          .title-r{
            width: 38%;
            display: inline-block;
            text-align: right;
            span{
              .mr(10);
              .fs(14);
              color: #0F7ae0;
            }
          }
        }
        .info-item{
          width: 100%;
          .padding(0,10);
          .h(110);
          border-bottom:1px solid #ccc;
          .item-img{
            width: 25%;
            height: 100%;
            display: inline-block;
            .pr(5);
            img{
              .h(90);
              .w(80);
            }
          }
          .item-message{
            width: 73%;
            height: 100%;
            display: inline-block;
            vertical-align: bottom;
            div{
              .fs(14);
              p{
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                word-break: break-word;
              }
              strong:before{
                content:'￥'
              }
              .number:before{
                content:'X';
                .pr(3);
              }
              .number{
                vertical-align: bottom;
                .ml(30);
              }
            }
            .size-color{
              .h(40);
              .lh(40)
            }
          }
        }
        .info-footing{
        width: 100%;
          .h(40);
          .lh(38);
          .padding(0,10);
          .footing-l{
            width: 60%;
            display: inline-block;
            box-sizing: border-box;
            p{
              .fs(14);
              span{
                vertical-align: bottom;
                color: #0F7ac0;
                .padding(0,3);
              }
              strong:before{
                content:'￥'
              }
              strong{
                color:#0F7ac0 ;
              }
            }
          }
          .footing-r{
            width: 38%;
            display: inline-block;
            text-align: right;
            span{
              display: inline-block;
              .w(60);
              .h(30);
              .lh(28);
              text-align: center;
              border: 1px solid #ccc;
            }
          }
        }
      }
    }
  }

</style>
